<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { ref, reactive, watch } from 'vue'
import { required } from '@/utils/formRules'
import { useForm } from '@/hooks/web/useForm'

// import { useCache } from '@/hooks/web/useCache'
// const { wsCache } = useCache()
// const dict: any = wsCache.get('dict')
// let parent_id: any = ref('0')

const data = ref<any>({})
const rules = reactive({
  pasture_org_id: [required],
  admin_dept_id: [required],
  data: [required]
})
const props = defineProps({
  // id: {
  //   type: Number,
  //   default: () => null
  // },
  // parentId: {
  //   type: String,
  //   default: () => null
  // },
  // allCheck: {
  //   type: Boolean,
  //   default: () => null
  // },
  datafolderTree: {
    type: Array,
    default: () => null
  }
})
const datafolderTree: any = ref([])
watch(
  () => props.datafolderTree,
  (value) => {
    if (!value) return
    datafolderTree.value = [{ id: '0', name: '=== 顶级 ===' }, ...value]
  },
  {
    deep: true,
    immediate: true
  }
)
console.log(props.datafolderTree, 'props.datafolderTree')
const schema = reactive<FormSchema[]>([
  {
    field: 'id',
    label: '转移到',
    component: 'TreeSelect',
    componentProps: {
      data: datafolderTree,
      'check-strictly': true,
      'default-expand-all': true,
      'node-key': 'id',
      props: {
        children: 'children',
        label: 'name'
      }
      // onChange: myUserListChange
    },
    formItemProps: {
      rules: [required]
    }
  }
  // {
  //   field: 'belong_type',
  //   label: '所属类型',
  //   component: 'Select',
  //   componentProps: {
  //     options: dict.belong_type,
  //     // onChange: typeChange,
  //     disabled: true
  //   }
  // }
  // {
  //   field: 'in_enclosure_id',
  //   label: '转移到',
  //   component: 'TreeSelect',
  //   hidden: false,
  //   componentProps: {
  //     data: newTreeData,
  //     'check-strictly': true,
  //     'default-expand-all': true,
  //     'node-key': 'id',
  //     props: {
  //       children: 'children',
  //       label: 'name'
  //     },
  //     onChange: outEnclosure
  //   },
  //   formItemProps: {
  //     rules: [required]
  //   }
  // }
])

const { register, methods: methodsForm } = useForm({
  schema
})

const getFormData = async () => {
  let formData = await methodsForm.getFormData()
  return {
    ...formData
  }
}

defineExpose({
  getFormData
})

const init = async () => {
  methodsForm.setValues(data.value)
}
init()
</script>

<template>
  <ContentWrap title="主数据">
    <Form :rules="rules" @register="register" :data="data" />
  </ContentWrap>
</template>
